@nuxt/kit

What is @nuxt/kit?

@nuxt/kit is a toolkit for developing Nuxt modules and extending the Nuxt framework. It provides utilities and helpers to streamline the process of creating and managing Nuxt modules, making it easier to integrate custom functionality into Nuxt applications.

What are @nuxt/kit's main functionalities?

Define Nuxt Module

This feature allows you to define a Nuxt module with metadata, default options, and a setup function. The setup function is where you can add your custom logic to extend Nuxt's functionality.

export default defineNuxtModule({
  meta: {
    name: 'my-module',
    configKey: 'myModule'
  },
  defaults: {
    option: true
  },
  setup (options, nuxt) {
    // Module setup code here
  }
})

Add Plugin

This feature allows you to add a plugin to your Nuxt application. The `addPlugin` function is used to specify the path to the plugin file, which will be included in the Nuxt build process.

import { addPlugin } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    addPlugin({ src: resolve(__dirname, 'plugin.js') })
  }
})

Extend Webpack Config

This feature allows you to extend the Webpack configuration used by Nuxt. The `extendWebpackConfig` function provides access to the existing Webpack config, which you can modify to include custom rules, plugins, or other settings.

import { extendWebpackConfig } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    extendWebpackConfig(config => {
      config.module.rules.push({
        test: /\.custom$/,
        loader: 'custom-loader'
      })
    })
  }
})

Other packages similar to @nuxt/kit

nuxt

Nuxt is the main framework for creating Vue.js applications with server-side rendering, static site generation, and more. While @nuxt/kit is focused on module development, Nuxt itself provides the core functionality for building and running Nuxt applications.

webpack

Webpack is a module bundler for JavaScript applications. While @nuxt/kit provides utilities for extending Nuxt's Webpack configuration, Webpack itself is the underlying tool that handles the bundling and optimization of application assets.

README

Nuxt

Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js.

It provides a number of features that make it easy to build fast, SEO-friendly, and scalable web applications, including:

• Server-side rendering, Static Site Generation, Hybrid Rendering and Edge-Side Rendering
• Automatic routing with code-splitting and pre-fetching
• Data fetching and state management
• SEO Optimization and Meta tags definition
• Auto imports of components, composables and utils
• TypeScript with zero configuration
• Go fullstack with our server/ directory
• Extensible with 200+ modules
• Deployment to a variety of hosting platforms
• ...and much more 🚀

Table of Contents

• 🚀 Getting Started
• 💻 Vue Development
• 📖 Documentation
• 🧩 Modules
• ❤️ Contribute
• 🏠 Local Development
• ⛰️ Nuxt 2
• 🛟 Professional Support
• 🔗 Follow Us
• ⚖️ License

---

🚀 Getting Started

Use the following command to create a new starter project. This will create a starter project with all the necessary files and dependencies:

npx nuxi@latest init <my-project>

[!TIP] Discover also nuxt.new: Open a Nuxt starter on CodeSandbox, StackBlitz or locally to get up and running in a few seconds.

💻 Vue Development

Simple, intuitive and powerful, Nuxt lets you write Vue components in a way that makes sense. Every repetitive task is automated, so you can focus on writing your full-stack Vue application with confidence.

Example of an app.vue:

<script setup lang="ts">
useSeoMeta({
  title: 'Meet Nuxt',
  description: 'The Intuitive Vue Framework.'
})
</script>

<template>
  <div id="app">
    <AppHeader />
    <NuxtPage />
    <AppFooter />
  </div>
</template>

<style scoped>
#app {
  background-color: #020420;
  color: #00DC82;
}
</style>

📖 Documentation

We highly recommend you take a look at the Nuxt documentation to level up. It’s a great resource for learning more about the framework. It covers everything from getting started to advanced topics.

🧩 Modules

Discover our list of modules to supercharge your Nuxt project, created by the Nuxt team and community.

❤️ Contribute

We invite you to contribute and help improve Nuxt 💚

Here are a few ways you can get involved:

• Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
• Suggestions: Have ideas to enhance Nuxt? We'd love to hear them! Check out the contribution guide to share your suggestions.
• Questions: If you have questions or need assistance, the getting help guide provides resources to help you out.

🏠 Local Development

Follow the docs to Set Up Your Local Development Environment to contribute to the framework and documentation.

🛟 Professional Support

• Technical audit & consulting: Nuxt Experts
• Custom development & more: Nuxt Agencies Partners

🔗 Follow Us

    

⚖️ License

MIT